<script setup>
import { computed, onMounted, useSlots } from 'vue'

const slots = useSlots()

const props = defineProps({
    type: {
        type: String,
        default: 'text',
        validator: (value) => ['text', 'password', 'textarea'].includes(value)
    },
    maxlength: {
        type: Number
    }
})

/**
 * 支持的最大长度，如果props中不传入，那么就根据类型，给一个默认值 */
const maxLength = computed(() => {
    return props.maxlength ?? props.type == 'textarea' ? 255 : 40
})

onMounted(() => {})
</script>

<template>
    <n-input :maxlength="maxLength" :type="props.type">
        <template v-for="(_item, key) in slots" :key="key" #[key]="data">
            <slot :name="key" v-bind="data ?? {}" />
        </template>
    </n-input>
</template>

<style scoped></style>
